<template>
	<view class="sl-list" @click.stop="" >
		<view class="uni-list" v-for="(list,index) in lists" :key="index">
			<view class="uni-list-cell">
				<view class="uni-list-cell-navigate" hover-class="uni-list-cell-hover1" 
					:class=" list.showArrow ? 'uni-navigate-right' :'' "
					:style="{'align-items':list.type == 'textarea' ? 'end' : 'center'}"	
					@click="goDetailPage(list,index)"
				>
					<uni-view  class="title">
						<text v-if="list.req" style="color: red;">*</text>{{list.name}}
					</uni-view>
					<uni-view class="input">
						<input  
							v-if="list.type != 'textarea'"
							:type="'text'" 
							:value="list.value || ''"
							:placeholder="list.placeholder || ''"
							:style="{'text-align':list.textAlign || 'left',color:list.color || ''}"
							:disabled=" list.type == 'select' || list.disabled "
							@input="onInput(e,index,list)" 
							v-restorelayui
						/>
						
						<textarea v-if="list.type == 'textarea'"
							:value="list.value || ''" 
							:placeholder="list.placeholder || ''" 
							:maxlength="250" 
							@input="onInput($event,index,list)" 
							v-restorelayui
						/>
						<text class="tisp" v-if="list.type == 'textarea'">
							{{list.value.length}}/250
						</text>
					</uni-view>
				</view>
			</view>
		</view>
		
		<tui-actionsheet :show="showActionSheet" :item-list="itemList" :mask-closable="true"
		  :color="'#9a9a9a'" :size="26" :is-cancel="true" @click="itemClick" @cancel="closeActionSheet"></tui-actionsheet>
	</view>
</template>

<script>
	import tuiActionsheet from "@/components/thor-ui/tui-actionsheet/tui-actionsheet";
	export default {
		components:{tuiActionsheet},
		props: {
			lists: {
				type: Array,
			}
		},
		data() {
			return {
				// lists: [
				// 	{
				// 		type:"select",
				// 		name: '退款原因',
				// 		value:"",
				// 		placeholder:"请选择",
				// 		showArrow:true,
				// 		textAlign:'right',
				// 		itemList:[
				// 			{text: "我不想要了"},
				// 			{text: "我要退货退款"}
				// 		]
				// 	},
				// 	{
				// 		name: '退款金额',
				// 		value:"123",
				// 		placeholder:"请输入金额",
				// 		showArrow:false,
				// 		textAlign:'right',
				// 		disabled:true
				// 	},
				// 	{
				// 		type:"textarea",
				// 		name: '退款说明',
				// 		value:"",
				// 		placeholder:"请输入说明",
				// 		showArrow:false
				// 	},
				// ],
				showActionSheet: false,
				itemList:[],
				selectIndex:-1
			};
		},
		methods: {
			goDetailPage(list,index) {
				if(list.type == 'select' && list.itemList){
					this.selectIndex = index;
					this.itemList = list.itemList;
					this.showActionSheet=true;
				}
			},
			closeActionSheet: function() {
				this.showActionSheet = false;
			},
			itemClick: function(e) {
				var list = this.lists[ this.selectIndex ];
				var text = this.itemList[e.index]['text'];
				this.$emit('onInput',text,this.selectIndex,list);
				this.lists[ this.selectIndex ]['value'] =text;
				this.selectIndex = -1;
				this.showActionSheet = false;
			},
			onInput(e,index,list) {
				this.$emit('onInput',e.detail.value,index,list);
			}
		}
	}
</script>

<style scoped lang="scss">
	.uni-list:after {
		background-color: #dadada;
	}
	.uni-list:before {
		height: 0;
	}
	.uni-list{
		display: flex;
		.title{
			min-width: 70px;
			font-size: $uni-font-size-base;
		}
		.input{
			position: relative;
			padding-right:12px;
			flex:1;
			input{
				font-size: $uni-font-size-base;
				color: #565656;
			}
			uni-textarea{
				font-size: $uni-font-size-base;
				width: calc(100vw - 100px);
				height: 250upx;
				color: #565656;
			}
			.tisp{
			    float: right;
			    margin-top: -25px;
			    position: relative;
			    z-index: 2;
			    margin-right: 5px;
			    color: #a7a7a7;
			}
		}
	}
	
</style>
